<template>
	<view>
<!-- 		<view>
			<table-title content="合同详情"></table-title>
			<view>
				<small-title content="合同信息"></small-title>
				<view class="item-table">
					<view-item name="合同编号"></view-item>
					<view-item name="租户名称"></view-item>
					<view-item name="租户地址"></view-item>
					<view-item name="合同期限"></view-item>
					<view-item name="租金"></view-item>
					<view-item name="结算方式" :isLast="true"></view-item>
				</view>
			</view>
		</view> -->
		<l-file
		    ref="lFile" 
		></l-file>
		<!-- <table-title content="合同详情"></table-title> -->
		<view v-for="(item,index) in fileList[0].fileId" class="file-card" @click="downloadFile(0,index)">
			<view class="img-view">
				<image class="img-little" src="@/static/Pdf.png"></image>
				<view class="img-active"></view>
				<view class="img-active">点 击 查 看</view>
			</view>
			<view>
				<view class="img-text">消防安全责任书.pdf</view>
			</view>
		</view>
<!-- 		<view class="file-card" @click="downloadFile(1)">
			<view class="img-view">
				<image class="img-little" src="@/static/WORD.png"></image>
				<view class="img-active"></view>
				<view class="img-active">点 击 查 看</view>
			</view>
			<view>
				<view class="img-text">配置清单.docx</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		ONLINE_SERVER_ADDRESS_BASE,
		syncGetOrder
	} from "../../../util/network.js"
	import {
		processHistoryList
	} from "../../../util/common.js"
	export default{
		data(){
			return {
				fileList:[{'fileName':'消防安全责任书.pdf', 'fileId':[]},
						  {'fileName':'家私配置清单.docx', 'fileId':-1},
				],
				token:'',
			}
		},
		methods: {
			downloadFile(fileType,index){
				let fileId = 0
				if(fileType == 0){
					fileId = this.fileList[fileType].fileId[index]
				}else{
					fileId = this.fileList[fileType].fileId
				}
				if(!(parseInt(fileId) > 0)){
					uni.showModal({
						content:'找不到该文件,请检查是否已完成收楼。',
						showCancel:false
					})
					return 0
				}
				this.$refs.lFile.download({
					url:`${ONLINE_SERVER_ADDRESS_BASE}/file/download/` + fileId,
					token:this.token,
				})
				.then(path=>{
				    // 打开文件
				    this.$refs.lFile.open(path);
				});
			},
			getFile(){
				this.token = uni.getStorageSync('token')
				let _this = this
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE}/fire-safety/my-list`,
					header: {
						'Authorization': this.token,
					},
					method:'GET',
					success: function (res) {
						console.log(res)
						if(res.data.code == 200){
							try{
								res.data.data.fireSafetyList.forEach(item => {
									_this.fileList[0].fileId.push(item.fileId)
								})
							}catch(e){
								//TODO handle the exception
							}
						}
					}
				})
			},
		},

		onLoad() {
			this.getFile()
		}
	}
</script>

<style>
	.item-table{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.file-card {
	  -webkit-box-sizing: content-box;
	  -moz-box-sizing: content-box;
	  box-sizing: content-box;
	  align-items: flex-start;
	  width: 565rpx;
	  height: 150rpx;
	  padding: 20px;
	  overflow: hidden;
	  border: 2px solid rgba(180,180,180,1);
	  font: normal 16px/1 "Times New Roman", Times, serif;
	  color: rgba(0,0,0,1);
	  text-align: center;
	  -o-text-overflow: ellipsis;
	  text-overflow: ellipsis;
	  background: #ffffff;
	  -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ;
	  box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ;
	  text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ;
	  margin-left: 50rpx;
	  margin-right: 50rpx;
	  margin-top: 50rpx;
	  border-radius: 20px 20px 20px 20px;
	}
	.img-view {
		position: relative;
		float: left;
		width: 100%;
		height: 100rpx;
	}
	.img-little {
		position: relative;
		float: left;
		margin-left: 10rpx;
		width: 20%;
		height: 100rpx;
	}
	.img-text {
		position: relative;
		float: left;
		margin-top: 10rpx;
	}
	.img-active {
		position: relative;
		font-size: 40rpx;
		font-style: oblique;
		float: right;
		margin-right: 10rpx;
		width: 60%;
		height: 50rpx;
	}
</style>
